React ErrorBoundary: ભૂલ આઇસોલેશન માટે એક વ્યાપક માર્ગદર્શિકા

વેબ ડેવલપમેન્ટની ગતિશીલ દુનિયામાં, મજબૂત અને સ્થિતિસ્થાપક એપ્લિકેશન્સ બનાવવી સર્વોપરી છે. React, વપરાશકર્તા ઇન્ટરફેસ બનાવવા માટેનું એક લોકપ્રિય JavaScript લાઇબ્રેરી, ભૂલોને સુંદર રીતે સંચાલિત કરવા માટે એક શક્તિશાળી પદ્ધતિ પૂરી પાડે છે: ErrorBoundary. આ માર્ગદર્શિકા React ErrorBoundaries ની જટિલતાઓમાં ઉંડાણપૂર્વક જાય છે, તેમના હેતુ, અમલીકરણ, શ્રેષ્ઠ પ્રથાઓ અને અણધાર્યા ભૂલોનો સામનો કરવા છતાં સરળ વપરાશકર્તા અનુભવની ખાતરી કરવા માટેની અદ્યતન તકનીકોનું અન્વેષણ કરે છે.

ErrorBoundary શું છે?

એક ErrorBoundary એ React ઘટક છે જે તેના ચાઇલ્ડ ઘટક ટ્રીમાં ગમે ત્યાં JavaScript ભૂલોને પકડે છે, તે ભૂલોને લોગ કરે છે અને આખી એપ્લિકેશનને ક્રેશ કરવાને બદલે બેકઅપ UI દર્શાવે છે. તેને એક સલામતી જાળ તરીકે વિચારો જે એક જ ઘટકની નિષ્ફળતાને સમગ્ર વપરાશકર્તા અનુભવને વિક્ષેપિત કરવાથી અટકાવે છે.

ErrorBoundaries રજૂ કરવામાં આવે તે પહેલાં, React ઘટકોમાં ન સંચાલિત JavaScript ભૂલો આખા ઘટક ટ્રીને અનમાઉન્ટ કરવા તરફ દોરી શકે છે, જેના પરિણામે ખાલી સ્ક્રીન અથવા તૂટેલી એપ્લિકેશન થાય છે. ErrorBoundaries નુકસાનને સમાવવાનો અને વધુ સુંદર પુનઃપ્રાપ્તિનો માર્ગ પૂરો પાડે છે.

ErrorBoundaries શા માટે વાપરો?

• સુધારેલ વપરાશકર્તા અનુભવ: અચાનક ક્રેશ થવાને બદલે, વપરાશકર્તાઓ એક મદદરૂપ બેકઅપ સંદેશ જુએ છે, જે તમારી એપ્લિકેશનના સકારાત્મક ખ્યાલને જાળવી રાખે છે.
• ભૂલ આઇસોલેશન: ErrorBoundaries ભૂલોને એપ્લિકેશનના ચોક્કસ ભાગોમાં અલગ પાડે છે, તેમને અન્ય બિનસંબંધિત વિસ્તારોને અસર કરતા અટકાવે છે.
• ડિબગીંગ સહાય: ભૂલોને લોગ કરીને, ErrorBoundaries સમસ્યાઓના મૂળ કારણોમાં મૂલ્યવાન આંતરદૃષ્ટિ પૂરી પાડે છે, જે ડિબગીંગ અને જાળવણીની સુવિધા આપે છે.
• એપ્લિકેશન સ્થિરતા: ErrorBoundaries તમારી એપ્લિકેશનની એકંદર સ્થિરતા અને સ્થિતિસ્થાપકતામાં વધારો કરે છે, જે તેને વપરાશકર્તાઓ માટે વધુ વિશ્વસનીય બનાવે છે.

ErrorBoundary ઘટક બનાવવું

React માં ErrorBoundary ઘટક બનાવવું પ્રમાણમાં સરળ છે. તેમાં static getDerivedStateFromError() અને componentDidCatch() લાઇફસાઇકલ પદ્ધતિઓ સાથે એક ક્લાસ ઘટક (ErrorBoundaries ક્લાસ ઘટકો હોવા જોઈએ) વ્યાખ્યાયિત કરવાનો સમાવેશ થાય છે.

મૂળભૂત ઉદાહરણ

અહીં એક ErrorBoundary ઘટકનું મૂળભૂત ઉદાહરણ છે:

            class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, errorInfo) {
 // You can also log the error to an error reporting service
 console.error(error, errorInfo);
 // logErrorToMyService(error, errorInfo);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return (
 
Something went wrong.
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

સ્પષ્ટીકરણ:

• constructor(props): hasError ને false પર સેટ કરીને ઘટકની સ્થિતિ શરૂ કરે છે.
• static getDerivedStateFromError(error): આ સ્થિર પદ્ધતિને વંશજ ઘટક દ્વારા ભૂલ ફેંકાયા પછી બોલાવવામાં આવે છે. તે જે ભૂલ ફેંકવામાં આવી હતી તેને એક દલીલ તરીકે પ્રાપ્ત કરે છે અને સ્થિતિને અપડેટ કરવા માટે એક મૂલ્ય પરત કરવું જોઈએ. આ કિસ્સામાં, તે hasError ને true પર સેટ કરે છે, જે બેકઅપ UI ને ટ્રિગર કરે છે.
• componentDidCatch(error, errorInfo): આ પદ્ધતિને વંશજ ઘટક દ્વારા ભૂલ ફેંકાયા પછી બોલાવવામાં આવે છે. તે ભૂલ અને તે ઘટક વિશેની માહિતી ધરાવતા ઑબ્જેક્ટને પ્રાપ્ત કરે છે જેણે ભૂલ ફેંકી હતી. આ ભૂલોને ભૂલ રિપોર્ટિંગ સેવા પર લોગ કરવા અથવા અન્ય સાઇડ ઇફેક્ટ્સ કરવા માટેનું આદર્શ સ્થાન છે. errorInfo ઑબ્જેક્ટમાં ભૂલ ફેંકનાર ઘટક વિશેની માહિતી સાથે componentStack કી શામેલ છે.
• render(): આ પદ્ધતિ ઘટકના આઉટપુટને રેન્ડર કરે છે. જો hasError true છે, તો તે બેકઅપ UI રેન્ડર કરે છે (આ કિસ્સામાં, એક સરળ “કંઈક ખોટું થયું.” સંદેશ). અન્યથા, તે તેના બાળકોને રેન્ડર કરે છે (this.props.children).

ErrorBoundary ઘટકનો ઉપયોગ કરવો

ErrorBoundary નો ઉપયોગ કરવા માટે, તમારી એપ્લિકેશનના કોઈપણ ઘટક અથવા વિભાગને ફક્ત લપેટી લો કે જેને તમે ErrorBoundary ઘટક સાથે સુરક્ષિત કરવા માંગો છો:

            import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 
 
 
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

જો MyPotentiallyErrorProneComponent ભૂલ ફેંકે છે, તો ErrorBoundary તેને પકડશે, લોગ કરશે અને બેકઅપ UI રેન્ડર કરશે.

ErrorBoundary અમલીકરણ માટે શ્રેષ્ઠ પ્રથાઓ

ErrorBoundaries ની અસરકારકતાને મહત્તમ કરવા માટે, આ શ્રેષ્ઠ પ્રથાઓ ધ્યાનમાં લો:

• વ્યૂહાત્મક પ્લેસમેન્ટ: તે ઘટકોની આસપાસ વ્યૂહાત્મક રીતે ErrorBoundaries મૂકો કે જે ભૂલો ફેંકવાની અથવા વપરાશકર્તા અનુભવ માટે સૌથી વધુ મહત્વપૂર્ણ હોવાની સંભાવના છે. તમારી આખી એપ્લિકેશનને એક જ ErrorBoundary માં લપેટશો નહીં. તેના બદલે, ચોક્કસ વિસ્તારોમાં નિષ્ફળતાઓને અલગ કરવા માટે બહુવિધ ErrorBoundaries નો ઉપયોગ કરો.
• ગ્રેન્યુલર ભૂલ સંચાલન: ErrorBoundaries ને તે ઘટકોની નજીક મૂકીને ગ્રેન્યુલર ભૂલ સંચાલનનું લક્ષ્ય રાખો જે નિષ્ફળ થઈ શકે છે. આ તમને વધુ ચોક્કસ બેકઅપ UI પ્રદાન કરવાની અને એપ્લિકેશનના અન્ય ભાગોમાં બિનજરૂરી વિક્ષેપોને રોકવાની મંજૂરી આપે છે.
• માહિતીપ્રદ બેકઅપ UI: એક સ્પષ્ટ અને મદદરૂપ બેકઅપ UI પ્રદાન કરો જે વપરાશકર્તાને ભૂલ વિશે માહિતી આપે છે અને સંભવિત ઉકેલો સૂચવે છે. સામાન્ય ભૂલ સંદેશાઓ ટાળો. તેના બદલે, સંદર્ભ અને માર્ગદર્શન આપો. ઉદાહરણ તરીકે, જો ભૂલ નેટવર્ક સમસ્યાને કારણે છે, તો ઇન્ટરનેટ કનેક્શન તપાસવાનું સૂચવો.
• ભૂલ લોગીંગ: componentDidCatch() નો ઉપયોગ કરીને ભૂલોને ભૂલ રિપોર્ટિંગ સેવા (દા.ત., Sentry, Rollbar) અથવા તમારા સર્વર-સાઇડ લોગમાં લોગ કરો. આ તમને ભૂલોને સક્રિય રીતે ટ્રૅક અને સંબોધવાની મંજૂરી આપે છે. લોગમાં સંબંધિત સંદર્ભ શામેલ કરો, જેમ કે ઘટક સ્ટેક અને વપરાશકર્તા માહિતી.
• ફરીથી પ્રયાસ મિકેનિઝમ્સ: તમારા બેકઅપ UI માં ફરીથી પ્રયાસ મિકેનિઝમ્સ અમલમાં મૂકવાનું વિચારો. ઉદાહરણ તરીકે, એક બટન પ્રદાન કરો જે વપરાશકર્તાને નિષ્ફળ થયેલા ઑપરેશનને ફરીથી અજમાવવાની મંજૂરી આપે છે. આ અસ્થિર ભૂલોને સંચાલિત કરવા માટે ખાસ કરીને ઉપયોગી થઈ શકે છે, જેમ કે નેટવર્ક સમસ્યાઓ.
• ErrorBoundaries ને સીધી રેન્ડર કરવાનું ટાળો: ErrorBoundaries તેમના ચાઇલ્ડ ઘટકોમાં ભૂલોને પકડવા માટે ડિઝાઇન કરવામાં આવ્યા છે. ErrorBoundary ને સીધી રીતે તેની અંદર રેન્ડર કરવાથી તેની પોતાની રેન્ડરિંગ પ્રક્રિયા દરમિયાન ફેંકવામાં આવેલી ભૂલો પકડાશે નહીં.
• અપેક્ષિત ભૂલો માટે ErrorBoundaries નો ઉપયોગ કરશો નહીં: ErrorBoundaries અણધાર્યા ભૂલો માટે બનાવાયેલ છે. અપેક્ષિત ભૂલો માટે, જેમ કે માન્યતા ભૂલો અથવા API ભૂલો, ઘટકની અંદર જ try/catch બ્લોક્સ અથવા અન્ય ભૂલ-સંભાળવાની પદ્ધતિઓનો ઉપયોગ કરો.

અદ્યતન ErrorBoundary તકનીકો

મૂળભૂત અમલીકરણથી આગળ, તમારી ErrorBoundary અમલીકરણને વધારવા માટે તમે ઘણી અદ્યતન તકનીકોનો ઉપયોગ કરી શકો છો:

કસ્ટમ ભૂલ રિપોર્ટિંગ

માત્ર કન્સોલ પર ભૂલો લોગ કરવાને બદલે, તમે ErrorBoundaries ને સમર્પિત ભૂલ રિપોર્ટિંગ સેવા સાથે એકીકૃત કરી શકો છો. Sentry, Rollbar અને Bugsnag જેવી સેવાઓ તમારી એપ્લિકેશનમાં ભૂલોને ટ્રૅક કરવા, વિશ્લેષણ કરવા અને ઉકેલવા માટેનાં સાધનો પૂરાં પાડે છે. આવી સેવાની સાથે એકીકૃત કરવા માટે, તમે સામાન્ય રીતે સેવાની SDK ઇન્સ્ટોલ કરશો અને પછી componentDidCatch() પદ્ધતિની અંદર તેની ભૂલ રિપોર્ટિંગ ફંક્શનને બોલાવશો:

            componentDidCatch(error, errorInfo) {
 // Log the error to Sentry
 Sentry.captureException(error, { extra: errorInfo });
}

            

              
                Copy
              
            
          

ડાયનેમિક બેકઅપ UI

સ્થિર બેકઅપ UI દર્શાવવાને બદલે, તમે જે ભૂલ આવી છે તેના પ્રકારના આધારે ગતિશીલ રીતે બેકઅપ UI જનરેટ કરી શકો છો. આ તમને વપરાશકર્તાને વધુ ચોક્કસ અને મદદરૂપ સંદેશાઓ પ્રદાન કરવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, તમે નેટવર્ક ભૂલો, પ્રમાણીકરણ ભૂલો અથવા ડેટા માન્યતા ભૂલો માટે અલગ સંદેશ પ્રદર્શિત કરી શકો છો.

            class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false,
 errorType: null
 };
 }

 static getDerivedStateFromError(error) {
 let errorType = 'generic';
 if (error instanceof NetworkError) {
 errorType = 'network';
 } else if (error instanceof AuthenticationError) {
 errorType = 'authentication';
 }
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true,
 errorType: errorType
 };
 }

 render() {
 if (this.state.hasError) {
 switch (this.state.errorType) {
 case 'network':
 return (
Network error. Please check your connection.
);
 case 'authentication':
 return (
Authentication error. Please log in again.
);
 default:
 return (
Something went wrong.
);
 }
 }

 return this.props.children;
 }
}

            

              
                Copy
              
            
          

સર્વર-સાઇડ રેન્ડરિંગ (SSR) સાથે ErrorBoundaries નો ઉપયોગ કરવો

સર્વર-સાઇડ રેન્ડરિંગ (SSR) નો ઉપયોગ કરતી વખતે, ErrorBoundaries મુશ્કેલ બની શકે છે કારણ કે સર્વર પર પ્રારંભિક રેન્ડર દરમિયાન થતી ભૂલો સમગ્ર સર્વર-સાઇડ રેન્ડરિંગ પ્રક્રિયાને નિષ્ફળ કરી શકે છે. આને સંચાલિત કરવા માટે, તમે try/catch બ્લોક્સ અને ErrorBoundaries ના સંયોજનનો ઉપયોગ કરી શકો છો. રેન્ડરિંગ પ્રક્રિયાને try/catch બ્લોકમાં લપેટી લો અને પછી જો ભૂલ આવે તો ErrorBoundary નું બેકઅપ UI રેન્ડર કરો. આ સર્વરને ક્રેશ થવાથી અટકાવશે અને તમને ભૂલ સંદેશ સાથેનું મૂળભૂત HTML પૃષ્ઠ આપવા દેશે.

Error Boundaries અને થર્ડ-પાર્ટી લાઇબ્રેરીઓ

તમારી React એપ્લિકેશનમાં થર્ડ-પાર્ટી લાઇબ્રેરીઓને એકીકૃત કરતી વખતે, આ લાઇબ્રેરીઓમાંથી ઊભી થઈ શકે તેવી સંભવિત ભૂલોથી વાકેફ રહેવું જરૂરી છે. તમે થર્ડ-પાર્ટી ઘટકોની અંદરની નિષ્ફળતાથી તમારી એપ્લિકેશનને સુરક્ષિત રાખવા માટે ErrorBoundaries નો ઉપયોગ કરી શકો છો. જો કે, આ લાઇબ્રેરીઓ આંતરિક રીતે ભૂલોને કેવી રીતે સંચાલિત કરે છે તે સમજવું નિર્ણાયક છે. કેટલીક લાઇબ્રેરીઓ પોતે જ ભૂલોનું સંચાલન કરી શકે છે, જ્યારે અન્ય બિનસંચાલિત અપવાદોને પકડવા માટે ErrorBoundaries પર આધાર રાખે છે. ખાતરી કરો કે ભૂલોને યોગ્ય રીતે સંચાલિત કરવામાં આવે છે તેની ખાતરી કરવા માટે થર્ડ-પાર્ટી લાઇબ્રેરીઓ સાથે તમારી એપ્લિકેશનનું સંપૂર્ણ પરીક્ષણ કરો.

ErrorBoundaries નું પરીક્ષણ કરવું

તે ખાતરી કરવા માટે કે તેઓ અપેક્ષિત રીતે કાર્ય કરે છે, ErrorBoundaries નું પરીક્ષણ કરવું નિર્ણાયક છે. તમે ભૂલોનું અનુકરણ કરવા અને ErrorBoundary ભૂલોને પકડે છે અને બેકઅપ UI રેન્ડર કરે છે તેની ચકાસણી કરવા માટે Jest અને React Testing Library જેવી પરીક્ષણ લાઇબ્રેરીઓનો ઉપયોગ કરી શકો છો. ErrorBoundary નું પરીક્ષણ કેવી રીતે કરવું તેનું એક મૂળભૂત ઉદાહરણ અહીં આપેલું છે:

            import { render, screen, fireEvent } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function BrokenComponent() {
 throw new Error('This component is broken');
}

describe('ErrorBoundary', () => {
 it('should render the fallback UI when an error occurs', () => {
 render(
 
 
 
 );
 const fallbackText = screen.getByText('Something went wrong.');
 expect(fallbackText).toBeInTheDocument();
 });
});

            

              
                Copy
              
            
          

ErrorBoundaries ની મર્યાદાઓ

જ્યારે ErrorBoundaries ભૂલ સંચાલન માટે એક શક્તિશાળી સાધન છે, ત્યારે તેમની મર્યાદાઓને સમજવી મહત્વપૂર્ણ છે:

• ErrorBoundaries રેન્ડરિંગ દરમિયાન, લાઇફસાઇકલ પદ્ધતિઓમાં અને તેમની નીચેના આખા ટ્રીના કન્સ્ટ્રક્ટર માં ભૂલો પકડે છે. તે ઇવેન્ટ હેન્ડલર્સની અંદર ભૂલો પકડતા નથી. તેના માટે, તમારે તમારા ઇવેન્ટ હેન્ડલર્સની અંદર try/catch બ્લોક્સનો ઉપયોગ કરવાની જરૂર છે.
• ErrorBoundaries ફક્ત ટ્રીમાં તેમની નીચેના ઘટકોમાં ભૂલો પકડે છે. તે ErrorBoundary ઘટકની અંદરની ભૂલોને પકડી શકતા નથી.
• ErrorBoundaries ક્લાસ ઘટકો છે. ફંક્શનલ ઘટકો ErrorBoundaries હોઈ શકતા નથી.
• ErrorBoundaries આના કારણે થતી ભૂલોને પકડતા નથી:
  • ઇવેન્ટ હેન્ડલર્સ (નીચે વધુ જાણો)
  • અસમકાલિક કોડ (દા.ત., setTimeout અથવા requestAnimationFrame કૉલબેક)
  • સર્વર સાઇડ રેન્ડરિંગ
  • ErrorBoundary માં જ ફેંકવામાં આવેલી ભૂલો (તેના બાળકોને બદલે)

ઇવેન્ટ હેન્ડલર્સમાં ભૂલોનું સંચાલન

પહેલાં ઉલ્લેખ કર્યો છે તેમ, ErrorBoundaries ઇવેન્ટ હેન્ડલર્સની અંદર થતી ભૂલોને પકડતા નથી. ઇવેન્ટ હેન્ડલર્સમાં ભૂલોને સંચાલિત કરવા માટે, તમારે try/catch બ્લોક્સનો ઉપયોગ કરવાની જરૂર છે:

            function MyComponent() {
 const handleClick = () => {
 try {
 // Code that might throw an error
 throw new Error('Something went wrong!');
 } catch (error) {
 console.error('Error in handleClick:', error);
 // Handle the error (e.g., display an error message to the user)
 }
 };

 return (
 Click me
 );
}

            

              
                Copy
              
            
          

ગ્લોબલ ભૂલ સંચાલન

જ્યારે ErrorBoundaries React ઘટકોની અંદર ભૂલોને સંચાલિત કરવા માટે એક પદ્ધતિ પૂરી પાડે છે, ત્યારે તે React ઘટક ટ્રીની બહાર થતી ભૂલોને સંબોધતા નથી, જેમ કે ન સંચાલિત વચન અસ્વીકારો અથવા વૈશ્વિક ઇવેન્ટ લિસનર્સમાં ભૂલો. આ પ્રકારની ભૂલોને સંચાલિત કરવા માટે, તમે બ્રાઉઝર દ્વારા પૂરી પાડવામાં આવેલી વૈશ્વિક ભૂલ સંચાલન પદ્ધતિઓનો ઉપયોગ કરી શકો છો:

• window.onerror: જ્યારે પૃષ્ઠ પર JavaScript ભૂલ થાય છે ત્યારે આ ઇવેન્ટ હેન્ડલર ટ્રિગર થાય છે. તમે ભૂલોને ભૂલ રિપોર્ટિંગ સેવા પર લોગ કરવા અથવા વપરાશકર્તાને સામાન્ય ભૂલ સંદેશ પ્રદર્શિત કરવા માટે આનો ઉપયોગ કરી શકો છો.
• window.onunhandledrejection: જ્યારે વચન અસ્વીકાર સંચાલિત ન થાય ત્યારે આ ઇવેન્ટ હેન્ડલર ટ્રિગર થાય છે. તમે ન સંચાલિત વચન અસ્વીકારોને લોગ કરવા અને તેમને અણધાર્યા વર્તનને કારણે થતા અટકાવવા માટે આનો ઉપયોગ કરી શકો છો.

            window.onerror = function(message, source, lineno, colno, error) {
 console.error('Global error:', message, source, lineno, colno, error);
 // Log the error to an error reporting service
 return true; // Prevent the default error handling
};

window.onunhandledrejection = function(event) {
 console.error('Unhandled promise rejection:', event.reason);
 // Log the rejection to an error reporting service
};

            

              
                Copy
              
            
          

નિષ્કર્ષ

React ErrorBoundaries મજબૂત અને સ્થિતિસ્થાપક વેબ એપ્લિકેશન્સ બનાવવા માટે એક નિર્ણાયક સાધન છે. તમારી એપ્લિકેશનમાં વ્યૂહાત્મક રીતે ErrorBoundaries મૂકીને, તમે ભૂલોને આખી એપ્લિકેશનને ક્રેશ થવાથી અટકાવી શકો છો અને વધુ સુંદર વપરાશકર્તા અનુભવ પ્રદાન કરી શકો છો. ભૂલોને લોગ કરવાનું, માહિતીપ્રદ બેકઅપ UI પ્રદાન કરવાનું અને ગતિશીલ બેકઅપ UI અને ભૂલ રિપોર્ટિંગ સેવાઓ સાથે એકીકરણ જેવી અદ્યતન તકનીકો ધ્યાનમાં રાખવાનું યાદ રાખો. આ શ્રેષ્ઠ પ્રથાઓને અનુસરીને, તમે તમારા React એપ્લિકેશન્સની સ્થિરતા અને વિશ્વસનીયતામાં નોંધપાત્ર સુધારો કરી શકો છો.

ErrorBoundaries સાથે યોગ્ય ભૂલ સંચાલન વ્યૂહરચનાઓનો અમલ કરીને, વિકાસકર્તાઓ ખાતરી કરી શકે છે કે તેમની એપ્લિકેશન્સ મજબૂત, વપરાશકર્તા-મૈત્રીપૂર્ણ અને જાળવવા યોગ્ય છે, વિકાસ અને ઉત્પાદન વાતાવરણમાં અનિવાર્ય ભૂલોને ધ્યાનમાં લીધા વગર. વૈશ્વિક પ્રેક્ષકો માટે વિશ્વસનીય અને ઉચ્ચ-ગુણવત્તાવાળી એપ્લિકેશન્સ બનાવવા માટે તમારા React ડેવલપમેન્ટ વર્કફ્લોના મૂળભૂત પાસા તરીકે ErrorBoundaries નો સ્વીકાર કરો.